<template>
  <Dialog title="病历详情" :visible="visible" class="two-columns" :reveal="false" @close="close">
    <!-- 病历详情 -->
    <!-- <el-row type="flex">
      <el-col :span="6">姓名：{{ detailsData.customerName }}</el-col>
      <el-col :span="6">性别：</el-col>
      <el-col :span="6">年龄：</el-col>
    </el-row> -->
    <UserInfo :info-id="customerId" />
    <el-row type="flex">
      <span style="margin-right: 50px">项目：{{ detailsData.projectName }}</span>
      <span>存放位置：{{ detailsData.location }}</span>
    </el-row>
    <div class="content-title">病历内容</div>
    <div class="div">
      <span v-html="detailsData.medicalRecordContent" />
    </div>
    <el-row type="flex">
      <el-col :span="6">病历单号：{{ detailsData.no }}</el-col>
      <el-col :span="6">科室/部门：{{ detailsData.deptName }}</el-col>
      <el-col :span="6">创建人：{{ detailsData.creatorName }}</el-col>
      <el-col :span="6">审核人：{{ detailsData.reviewerName }}</el-col>
    </el-row>
    <div class="all-margin-bottom" />
  </Dialog>
</template>
<script>
import Dialog from '@/components/Dialog';
import UserInfo from '@/components/UserInformation';
export default {
  components: {
    Dialog,
    UserInfo,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    medicalDetailsId: {
      type: [Number, String],
      default: '',
    },
    customerId: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      detailsData: {},
    };
  },
  watch: {
    medicalDetailsId: {
      handler(newId) {
        console.log(this.customerId, "zhixingle");
        this.getDetails(newId);
      },
    },
  },
  mounted() {
    this.getDetails(this.medicalDetailsId);
  },
  methods: {
    close() {
      this.$emit('seeDetails', false);
    },
    getDetails(id) { // 请求列表的数据
      if (!id) return false;
      this.$api['department/diagnose/departmentorder/getMedicalDetails']({ id }).then(res => {
        if (res.code !== 200) return;
        this.detailsData = res.data;
        console.log(res, "查询病历管理详情成功");
        this.$message.success("查询病历管理详情成功");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.div{
  margin-top: 18px;
  border: 1px solid #999;
  height: 300px;
}
.el-col{
  line-height: 30px;
}
.content-title{
  margin-top: 18px;
  font-weight: bold;
}
</style>
